import React, {useState, useReducer, useEffect} from 'react'

const AsyncPage = ({name}) => {
  const [loading, setLoading] = useState(true)
  const [person, setPerson] = useState({})

  useEffect(()=>{
       console.log("useEffect。。。。")
    setLoading(true)
    setTimeout(()=>{
      console.log("settime....")
      setLoading(false)
      setPerson({name})
    },
    2000)
  }, [name])

  return (
    <div>
      {loading? <p>Loading....</p>:<p>{person.name}</p>}
    </div>
  )
}

const PersonPage = () => {
  const [state, setState] = useState('')
  const changeName = (name) => {
    setState(name)
  }
  return (
    <div>
      <AsyncPage name={state} />
      <button onClick={()=>{changeName('名字1')}}>名字1</button>
      <button onClick={()=>{changeName('名字2')}}>名字2</button>
    </div>
  )
}

export default PersonPage